<template>
<div>
  <el-table :data="state.tableData" stripe size="medium">
    <el-table-column prop="id" label="ID" width="80" sortable></el-table-column>
    <el-table-column prop="orderOn" label="订单编号" width="200"></el-table-column>
    <el-table-column prop="total" label="总金额"></el-table-column>
    <el-table-column prop="status" label="状态">
      <template v-slot="scope">
        <el-tag type="info" v-if="scope.row.status === 0">已取消</el-tag>
        <el-tag type="warning" v-if="scope.row.status === 1">待支付</el-tag>
        <el-tag type="primary" v-if="scope.row.status === 2">待发货</el-tag>
        <el-tag type="primary" v-if="scope.row.status === 3">待收货</el-tag>
        <el-tag type="danger" v-if="scope.row.status === 4">待评价</el-tag>
        <el-tag type="success" v-if="scope.row.status === 5">已完成</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="150px"></el-table-column>
    <el-table-column prop="payTime" label="付款时间"></el-table-column>
    <el-table-column prop="payno" label="付款编号"></el-table-column>
    <el-table-column label="详情">
      <template v-slot="scope">
        <el-button @click="detail(scope.row.id)">查看详情</el-button>
      </template>
    </el-table-column>

    <el-table-column label="操作"  width="180" align="center">
      <template v-slot="scope">
        <el-button type="success" @click="changeStatus(scope.row.status, scope.row.id, scope.row.userid, scope.row.total)" v-if="scope.row.status === 1">付款</el-button>
        <el-button type="primary" v-if="scope.row.status === 2">待发货</el-button>
        <el-button type="warning" @click="changeStatus(scope.row.status, scope.row.id, scope.row.userid, scope.row.total)" v-if="scope.row.status === 3">收货</el-button>
        <el-popconfirm title="确认取消吗？" @confirm="handleDelete(scope.row.status ,scope.row.id)">
          <template #reference>
            <el-button link type="danger"  v-if="scope.row.status < 4"><el-icon><Delete /></el-icon>取消</el-button>
            <el-button link type="danger"  v-if="scope.row.status >= 4"><el-icon><Delete /></el-icon>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script setup>
import {reactive} from "vue";
import request from "../../request.js";
import {Delete} from '@element-plus/icons-vue'
import {ElMessage, ElNotification} from "element-plus";

const state = reactive({
  tableData:[],
  userid:localStorage.getItem('userid'),
  cart:{}
})

const load = () => {
  request.get("/order?userid=" + state.userid).then(res => {
    state.tableData = res.data
    console.log(state.tableData)
  })
}
load()


const handleDelete = (status, id) => {
  if(status>=4){
    request.delete("/order/" + id).then( res => {
      if(res.code == '200'){
        ElNotification.success("删除成功")
        load()
      }else{
        ElNotification.error(res.msg)
      }
    })
  }else{
    request.put("/order/upCancel?id=" + id).then(res => {
      if(res.code == '200'){
        ElNotification.success("删除成功: "+res.msg)
        load()
      }else{
        ElNotification.error(res.msg)
      }
    })
  }
}
const changeStatus = (status, id, userid, total) => {
  state.cart.status = status
  state.cart.id = id
  state.cart.userid = userid
  state.cart.total = total
  request.put('/order', state.cart).then(res => {
      if(res.code == '200'){
        load()
      }else {
        ElNotification.error("支付失败")
      }
  })
}

</script>

<style scoped>

</style>